<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<%
	
	String sDataX = "\"";
	String sData1 = "";
	String sData2 = "";
	String sData3 = "";
	String sData4 = "";
	
%>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function drawLineChart() {
    var chart;
    $(document).ready(function() {
    	 chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            title: {            	
	                text: 'Chart Title'
	            },	            
            xAxis: {
                categories: [<%out.print(sDataX);%>]
						},
						yAxis : {
							title : {
								text : 'Data (Unit)'
							}
						},
						tooltip : { formatter: function() {
	                        return '<b>'+ this.series.name +'</b><br/>'+
	                        this.x +': '+ this.y +'unit';
	                }
						},
						plotOptions : {
							line : {
								dataLabels : {
									enabled : true
								},
								enableMouseTracking : false
							}
						},
						series : [ {
							name : 'Data 1',
							data : [<%out.print(sData1);%>]
						}, {
							name : 'Data 2',
							data : [<%out.print(sData2);%>]
						}, {
							name : 'Data 3',
							data : [<%out.print(sData3);%>]
						}, {
							name : 'Data 4',
							data : [<%out.print(sData4);%>]
						} ]
						
					});
				});
    chart.setTitle({text: document.getElementById("chartTitle").value});
    
	};
	
	function drawColumnChart() {
	    var chart;
	    $(document).ready(function() {
	        chart = new Highcharts.Chart({
	            chart: {
	                renderTo: 'container',
	                type: 'column'
	            },
	            title: {
	                text: 'Vidagis Chart Demo'
	            },	            
	            xAxis: {
	                categories: [<%out.print(sDataX);%>]
	            },
	            yAxis: {
	                min: 0,
	                title: {
	                    text: 'Data (unit)'
	                }
	            },
	            legend: {
	                layout: 'vertical',
	                backgroundColor: '#FFFFFF',
	                align: 'left',
	                verticalAlign: 'top',
	                x: 100,
	                y: 70,
	                floating: true,
	                shadow: true
	            },
	            tooltip: {
	                formatter: function() {
	                    return ''+
	                        this.x +': '+ this.y +' unit';
	                }
	            },
	            plotOptions: {
	                column: {
	                    pointPadding: 0.2,
	                    borderWidth: 0
	                }
	            },
	            series : [ {
					name : 'Data 1',
					data : [<%out.print(sData1);%>]
				}, {
					name : 'Data 2',
					data : [<%out.print(sData2);%>]
				}, {
					name : 'Data 3',
					data : [<%out.print(sData3);%>]
				}, {
					name : 'Data 4',
					data : [<%out.print(sData4);%>]
				} ]
	        });
	    });
	    chart.setTitle({text: document.getElementById("chartTitle").value});
	}
</script>

</head>
<body>

</body>
</html>